<template>
  <view class="change-phone">
    <view>请输入你需要绑定的新手机号</view>
    <view class="input">
      <view class="areas">+86 ></view>
      <u-input
        v-model="value"
        type="text"
        :trim="true"
        :focus="true"
        :clearable="false"
        placeholder="请输入手机号"
        placeholder-style="font-size: 32rpx"
        :height="90"
        :custom-style="inputStyle"
      />
    </view>

    <u-button type="success" @click="getVerificat" :disabled="disabled"
      >获取验证码</u-button
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      disabled: true, //获取验证码 默认不能点击
      inputStyle: {
        flex: 1,
        fontSize: "32rpx",
      },
    };
  },
  methods: {
    /**
     * 获取验证码
     */
    getVerificat() {
      var form = {
        phone: this.value,
      };
      this.$u.api.smsApi(form).then((res) => {
        uni.showToast({
          title: "发送成功",
          duration: 500,
          icon: "none",
        });
        uni.navigateTo({
          url: "/pages/bindPhone/verificatPhone?phone=" + this.value,
        });
      });
    },
  },
  watch: {
    value(newV, oldV) {
      if (!/^1[3456789]\d{9}$/.test(newV)) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
};
</script>

<style scoped lang ='scss' >
.change-phone {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding: 20 * 4rpx;
  & > view:nth-child(1) {
    font-size: 40rpx;
    /* text-align: center; */
    margin-top: 30 * 2rpx;
    /* color: #909399; */
  }
  .input {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 30 * 2rpx 0;
    margin-bottom: 100rpx;
    border-bottom: 2rpx solid #dcdfe6;
    .areas {
      font-size: 25rpx;
      margin-right: 20rpx;
    }
  }
}
</style>
